<template>
	<div id="mine">
		<div class="mui-content">
			<div class="mine-top">
				<div class="logo"><img src="../assets/images/center/head.png" /></div>
				<div class="phone">187****8133</div>
			</div>
			<ul class="center">
				<li class="li-item">
					<span class="icon"><img src="../assets/images/center/inf2.png"/></span>
					<span class="name">做任务</span>
					<router-link to="/task">
						<span class="type">1/4<img src="../assets/images/arror.png"/></span>
					</router-link>
				</li>
				<li class="li-item">
					<span class="icon"><img src="../assets/images/center/inf1.png"/></span>
					<span class="name">最近浏览</span>
				</li>
			</ul>
			<div class="btn">退出登录</div>
		</div>
		<div class="footer">
			<div class="footer-item" @click="gotoPage('index')">
				<span class="mui-icon-house"></span>
				<span class="footer-tab-label">首页</span>
			</div>
			<div class="footer-item" @click="gotoPage('list')">
				<span class="mui-icon-discover" style="left: 40.5%;"></span>
				<span class="footer-tab-label">发现</span>
			</div>
			<!-- <div class="footer-item" @click="gotoPage('news')">
				<span class="mui-icon-list"></span>
				<span class="footer-tab-label">资讯</span>
			</div> -->
			<div class="footer-item footer-item-active" @click="gotoPage('mine')">
				<span class="mui-icon-my mui-icon-my-active"></span>
				<span class="footer-tab-label footer-tab-label-active">我的</span>
			</div>
		</div>
	</div>
</template>

<script>
	import libs from "@/assets/js/libs";

	export default {
		mounted() {},
		data() {
			return {

			};
		},
		methods: {
			gotoPage(url) {
				//判断是否登录
				this.$router.push({
					name: url
				});
			}
		}
	};
</script>
<style lang="scss">
	@import "../assets/css/funcs.scss";
	@import '../assets/css/common.scss';
	#mine {
		background-color: #F5F5F5;
		.mine-top {
			background: linear-gradient(119deg, rgba(255, 132, 0, 1), rgba(255, 156, 15, 1));
			height: pxToRem(388px);
			line-height: pxToRem(388px);
			.logo {
				width: pxToRem(131px);
				height: pxToRem(131px);
				margin: auto;
				padding-top: pxToRem(88px);
				img {
					width: 100%;
				}
			}
			.phone {
				font-size: pxToRem(31px);
				height: pxToRem(26px);
				color: #fff;
				text-align: center;
				line-height: pxToRem(25px);
				position: relative;
				top: pxToRem(129px);
			}
		}
		.center {
			background-color: #fff;
		}
		.center>.li-item:last-child {
			border: none;
		}
		.li-item {
			height: 51px;
			line-height: 51px;
			width: 94%;
			margin: auto;
			background-image: url(../assets/images/arror.png);
			background-repeat: no-repeat;
			background-position: right;
			background-size: 6%;
			border-bottom: 1px solid #f5f5f5;
			background-position-y: pxToRem(34px);
		}
		.icon {
			width: 17px;
			height: 17px;
			display: block;
			float: left;
			position: relative;
			top: 17px;
			img {
				width: 100%;
				vertical-align: top;
			}
		}
		.name {
			font-size: pxToRem(26px);
			color: #010101;
			margin-left: pxToRem(16px);
		}
		.type {
			height: pxToRem(35px);
			line-height: pxToRem(35px);
			color: #999999;
			font-size: pxToRem(20px);
			padding: pxToRem(2px) pxToRem(2px);
			border-radius: pxToRem(4px);
			float: right;
			position: relative;
			top: pxToRem(36px);
			img {
				width: 22px;
				height: 22px;
				background-color: #F4F4F4;
				position: relative;
				top: -2px;
				margin-left: 11px;
				right: -2px;
			}
		}
		.btn {
			height: 51px;
			line-height: 51px;
			text-align: center;
			color: #999;
			font-size: 14px;
			background-color: #fff;
			margin-top: pxToRem(18px);
		}
	}
</style>